<template>
  <el-container>
		<el-main ref="printMainRef">
			<div class="innerPage">
				<el-row :gutter="15">
					<el-col :lg="8">
						<el-card shadow="never" class="top-state">
							<h2>OID<b>2000832</b><span>复制</span></h2>
							<p>当前状态：物流配送中</p>
						</el-card>
					</el-col>
					<el-col :lg="16">
						<el-card shadow="never">
							<el-row :gutter="15">
								<el-col :lg="8">
									<Statistic title="订单量" :value="6400" suffix="Kg" groupSeparator />
								</el-col>
								<el-col :lg="8">
									<Statistic title="发货量" :value="1568.873" suffix="Kg" groupSeparator />
								</el-col>
								<el-col :lg="8">
									<Statistic title="订单金额" :value="1920000" prefix="¥" groupSeparator />
								</el-col>
							</el-row>
						</el-card>
					</el-col>
				</el-row>
				<el-card shadow="never" header="进程">
					<el-steps :active="2" finish-status="success">
						<el-step title="创建" description="创建人 Sakuya" />
						<el-step title="分配" description="承运商 SCUI logistics" />
						<el-step title="配送" description="3 条物流记录" />
						<el-step title="完成" />
					</el-steps>
				</el-card>
				<el-card shadow="never" style="margin-top: 15px;">
					<el-tabs>
						<el-tab-pane label="基础信息">
							<el-descriptions :column="3" border size="small">
								<el-descriptions-item label="订单号">2000832</el-descriptions-item>
								<el-descriptions-item label="创建人">sakuya</el-descriptions-item>
								<el-descriptions-item label="创建时间">2021-07-21 13:10:00</el-descriptions-item>
								<el-descriptions-item label="客户编号">0000017</el-descriptions-item>
								<el-descriptions-item label="客户名称">上海红谷物流有限公司</el-descriptions-item>
								<el-descriptions-item label="客户评级">
									<el-rate v-model="rate" disabled />
								</el-descriptions-item>
							</el-descriptions>
						</el-tab-pane>
						<el-tab-pane label="物流记录" lazy>
							<Table :data="list" stripe hideDo>
								<el-table-column label="ID" prop="id" width="80" sortable />
								<el-table-column label="载具" prop="vehicle" width="120" />
								<el-table-column label="驾驶员" prop="driver" width="120" />
								<el-table-column label="状态" prop="state" width="120" />
								<el-table-column label="载量" prop="quantity" width="120" sortable />
							</Table>
						</el-tab-pane>
						<el-tab-pane label="操作日志" lazy>
							<el-timeline style="padding:15px;">
								<el-timeline-item v-for="(item, index) in logs" :key="index" :timestamp="item.timestamp">
									{{item.content}}
								</el-timeline-item>
							</el-timeline>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</div>
		</el-main>
		<el-aside width="300px" style="border-left: 1px solid #e6e6e6;border-right: 0;padding:15px;">
			<div class="side-item">
				<div class="header">操作</div>
				<div class="content">
					<el-button type="primary" size="small" @click="printFn">打印</el-button>
					<el-button size="small">次要操作</el-button>
				</div>
			</div>
			<div class="side-item">
				<div class="header">状态</div>
				<div class="content">
					<p>进行中</p>
				</div>
			</div>
			<div class="side-item">
				<div class="header">标记</div>
				<div class="content">
					<el-tag>重要</el-tag>
					<el-tag type="danger">紧急</el-tag>
				</div>
			</div>
			<div class="side-item">
				<div class="header">指数</div>
				<div class="content">
					<Echarts height="200px" :option="radarsOption"></Echarts>
				</div>
			</div>
		</el-aside>
	</el-container>
</template>

<script setup>
import {defineAsyncComponent, ref} from 'vue'
import print from '@/utils/print'

const Table = defineAsyncComponent(() => import('@/components/Table'))
const Echarts = defineAsyncComponent(() => import('@/components/Echarts'))
const Statistic = defineAsyncComponent(() => import('@/components/Statistic'))

const printMainRef = ref(null)
const rate = 3.7
const logs = [
  {content: 'sakuya 创建了物流记录 1', timestamp: '2018-04-17'},
  {content: 'sakuya 维护了客户信息', timestamp: '2018-04-15'},
  {content: 'sakuya 创建订单', timestamp: '2018-04-15'}
]
const list = [
  { id: 1, vehicle: '沪A88808', driver: '刘翔', state: '0', quantity: '29.654'},
  { id: 2, vehicle: '沪A88808', driver: '刘翔', state: '0', quantity: '28.850'},
  { id: 3, vehicle: '沪A3B88D', driver: '刘翔', state: '0', quantity: '28.159'}
]
const radarsOption = {
  radar: {
    radius: 60,
    center: ['50%', '50%'],
    indicator: [
      {name: '人员', max: 100},
      {name: '设备', max: 100},
      {name: '产品', max: 100},
      {name: '服务', max: 100},
      {name: '耗时', max: 100}
    ]
  },
  series: [{
    name: 'SCUI',
    type: 'radar',
    areaStyle: {},
    data: [{value: [50, 28, 89, 70, 10]}]
  }]
}

function printFn(){
  print(printMainRef.value)
}
</script>

<style scoped>
.innerPage {width: 1000px;margin:0 auto;}
.top-state {background: #409EFF;color: #fff;}
.top-state h2 {font-size: 17px;font-weight: normal;}
.top-state h2 b {margin-left: 10px;}
.top-state h2 span {font-size: 12px;margin-left: 15px;}
.top-state p {opacity: 0.8;margin-top: 15px;}

.side-item {border-bottom: 1px solid #eee;margin-bottom: 30px;}
.side-item .header {font-size: 14px;margin-bottom: 15px;font-weight: bold;}
.side-item .content {padding-bottom:15px;}

@media (max-width: 1610px){.innerPage {width: 100%;}}
</style>